import { ProCard, ProForm, ProFormDatePicker, ProFormRadio, ProFormText, ProFormTextArea } from "@ant-design/pro-components";
import { Col, Divider, QRCode, Row } from "antd";
import moment from "moment";

const App:React.FC=()=>{

    return <>
        <ProCard title='执行维修' style={{height:700}}   >
        <ProForm layout="horizontal" labelAlign="left" labelCol={{offset:0,span:3}} submitter={false}
             style={{marginLeft:300}} labelWrap
        >
            <Row gutter={8}>
                <Col span={4}>
                   <QRCode value="KM0012-006" size={120}  />
                </Col>
                <Col span={20}>
                   <ProFormText name='f1' label='设备编号' width={200} />
                   <ProFormText name='f2' label='设备名称' width={200} />
                </Col>
            </Row>
          </ProForm>
            <Divider />
            <ProForm layout="horizontal" labelAlign="left" labelCol={{offset:0,span:6}} submitter={false}
             style={{marginLeft:300}} labelWrap
             >
            <Row gutter={8}>
               <Col span={8}>
                   <ProFormText name='f3' label='申请部门'   width={200} />
                   <ProFormText name='f4' label='设备位置'   width={200} />
                   <ProFormText name='f5' label='设备管理人' width={200} />
                   <ProFormRadio.Group name='f7' label='紧急程度'   width={200} 
                      options={[{value:0,label:'特急'},{value:1,label:'紧急'},{value:2,label:'一般'}]}
                   />
                   <ProFormDatePicker name='f71' label='要求完成时间'   width={200} initialValue={moment()} />
                </Col>
                <Col span={8}>
                   <ProFormTextArea name='f6' label='故障描述'   width={300}
                      fieldProps={{
                        rows:6,
                      }}
                   />
                   <ProFormText name='f8' label='故障图片'   width={300} />
                   <ProFormText name='f9' label='初步判定'   width={300} />
                </Col>
            </Row>
            <Divider/>
            <Row gutter={8}>
              <Col span={8}>
                  <ProFormText name='f10' label='故障判定' width={200} />
                  <ProFormText name='f11' label='故障代码' width={200} />
                  <ProFormRadio.Group name='f111' label='故障原因' width={200} 
                     options={[{value:1,label:'操作原因'},{value:2,label:'设备原因'},{value:3,label:'其他'}]}
                  />
              </Col>
              <Col span={8}>
                  <ProFormText name='f12' label='维修措施' width={200} />
                  <ProFormText name='f13' label='备品备件' width={200} />
                  <ProFormText name='f131' label='建议预防措施' width={200} />
              </Col>
              <Col span={8}>
                  <ProFormText name='f14' label='维修开始时间' width={200} />
                  <ProFormText name='f15' label='维修完成时间' width={200} />
                  <ProFormText name='f16' label='维修人' width={200} />
              </Col>
            </Row>
        </ProForm>
        </ProCard>
    </>;
};

export default App;